<template>
    <el-card class="industrial-renewal">
        <div class="title-container">
            <span class="rect"></span>
            <h3>近5年亩均税收走势</h3>
        </div>
        <el-divider></el-divider>
        <div class="echarts-container" ref="echartsContainer">
        </div>
    </el-card>
</template>


<script>
export default {
    data() {
        return {
            xAsisData: [],
            yAsisData: [],
        }
    },
    props: {
        landFormData: {
            type: Object,
            default: () => { }
        },
        scheduleDate: {
            type: String,
            default: ""
        }
    },
    methods: {
        async init() {
            var customSeries = {}
            let api = window.$crud("land/mutax/yearstat")
            let res = await this.$awaitWraper(api.get(this.landFormData.id))
            this.xAsisData = [];
            this.yAsisData = []
            res.forEach(i => {
                this.xAsisData.push(i.name)
                this.yAsisData.push(i.value)
            })
            setTimeout(() => {
                if (this.scheduleDate.slice(0, 4)) {
                    var verticalLineX = this.scheduleDate.slice(0, 4) - this.xAsisData[0]
                    customSeries = {
                        type: 'line',
                        name: '',
                        symbol: 'none',
                        lineStyle: {
                            color: 'red',
                            width: 2,
                            type: 'line'
                        },
                        data: [
                            [verticalLineX, 0],
                            [verticalLineX, Math.max(...this.yAsisData)]
                        ]
                    };
                } else {
                    customSeries = {
                        type: 'line',
                        name: '',
                        symbol: 'none',
                        lineStyle: {
                            color: 'red',
                            width: 2,
                            type: 'line'
                        },
                        data: [

                        ]
                    };
                }
                let myChart = echarts.init(this.$refs.echartsContainer);
                var option = {
                    xAxis: {
                        type: 'category',
                        data: this.xAsisData
                    },
                    yAxis: {
                        type: 'value'
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    grid: {
                        top: '50px',
                        bottom: '20px',
                        left: '64px',
                        right: '0'
                    },
                    series: [
                        {
                            data: this.yAsisData,
                            type: 'line'
                        },
                        customSeries
                    ]
                };
                myChart.setOption(option);
            }, 600);

        }
    },
    mounted() {
        // this.init()
    }
}
</script>


<style scoped lang='scss'>
.echarts-container {
    width: 300px;
    height: 250px;
    // background-color: skyblue;
}

::v-deep .el-divider--horizontal {
    margin: 5px 0;
}

.industrial-renewal {
    width: 26.5%;
}
</style>